<template>
  <BlueBackground>
    <van-cell-group inset>
      <van-uploader :after-read="afterRead">
        <van-cell title="头像" center>
          <template #right-icon>
            <div class="user-icon">
              <img :src="imgBase" alt="" />
            </div>
          </template>
        </van-cell>
      </van-uploader>
      <van-cell title="用户id" center :value="userId"> </van-cell>
      <van-cell title="昵称" center>
        <template #right-icon>
          <input
            class="inp"
            type="text"
            v-model="nickName"
            @blur="saveNickName"
          />
        </template>
      </van-cell>
      <van-cell title="简介" center>
        <template #right-icon>
          <input class="inp" type="text" v-model="desc" @blur="saveDesc" />
        </template>
      </van-cell>
    </van-cell-group>
  </BlueBackground>
</template>

<script>
import BlueBackground from "../components/BlueBackground.vue";
export default {
  name: "UserMes",
  data() {
    return {
      imgBase: null,
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: sessionStorage.getItem("userToken"),
      userId: "",
      nickName: "",
      desc: "",
    };
  },
  methods: {
    getMyMessage() {
      let tokenString = this.tokenString;
      let appkey = this.appkey;
      this.axios({
        method: "get",
        url: "http://www.kangliuyong.com:10002/findAccountInfo",
        params: {
          appkey,
          tokenString,
        },
      })
        .then((res) => {
          this.imgBase = res.data.result[0].userImg;
          this.userId = res.data.result[0].userId;
          this.nickName = res.data.result[0].nickName;
          this.desc = res.data.result[0].desc;
        })
        .catch((err) => {});
    },
    afterRead(file) {
      this.imgBase = file.content;
      this.isHasImg = false;
      let tokenString = this.tokenString;
      let imgType = file.file.type.split("/")[1];
      let appkey = this.appkey;
      let serverBase64Img = file.content.replace(
        /^data:image\/[A-Za-z]+;base64,/,
        ""
      );
      let data = `appkey=${appkey}&tokenString=${tokenString}&imgType=${imgType}&serverBase64Img=${serverBase64Img}`;
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/updateAvatar",
        data,
      })
        .then((res) => {
          //   this.imgBase = res.data.userBg;
        })
        .catch((err) => {});
    },
    saveNickName() {
      let tokenString = this.tokenString;
      let appkey = this.appkey;
      let nickName = this.nickName;
      let data = `appkey=${appkey}&tokenString=${tokenString}&nickName=${nickName}`;
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/updateNickName",
        data,
      })
        .then((res) => {
          //
        })
        .catch((err) => {});
    },
    saveDesc() {
      let tokenString = this.tokenString;
      let appkey = this.appkey;
      let desc = this.desc;
      let data = `appkey=${appkey}&tokenString=${tokenString}&desc=${desc}`;
      this.axios({
        method: "post",
        url: "http://www.kangliuyong.com:10002/updateDesc",
        data,
      })
        .then((res) => {})
        .catch((err) => {});
    },
  },
  created() {
    this.getMyMessage();
  },
  components: {
    BlueBackground,
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-uploader__input-wrapper {
  width: 343px;
}
.user-icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  position: relative;
  //   /deep/ .van-uploader__input-wrapper {
  //     width: 40px;
  //     height: 40px;
  //   }
  img {
    width: 100%;
    height: 100%;
  }
}
.inp {
  border: none;
  outline: none;
  text-align: right;
}

.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}

.search-icon {
  font-size: 16px;
  line-height: inherit;
}
</style>